<template>
  <div ref="flow" style="height: 100vh"></div>
</template>
<script setup>
// npm i @logicflow/core
// npm i @logicflow/extension
import { ref, onMounted } from "vue";
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/index.css";
import CustomPolygon from "./component/CustomPolygon";
import DetailHtml from "./component/DetailHtml";
import RequestIpHtml from "./component/RequestIpHtml";
import TargetIpHtml from "./component/TargetIpHtml";
import TagHtml from "./component/TagHtml";
import LineEdge from "./component/LineEdge";
import TextHtml from "./component/TextHtml";

const flow = ref(null);
// https://site.logic-flow.cn/api/detail/constructor
onMounted(() => {
  const lf = new LogicFlow({
    container: flow.value,
    grid: false,
    textEdit: false,
    adjustNodePosition: false,
  });
  lf.register(CustomPolygon);
  lf.register(DetailHtml);
  lf.register(RequestIpHtml);
  lf.register(TargetIpHtml);
  lf.register(TagHtml);
  lf.register(LineEdge);
  lf.register(TextHtml);
  lf.render({
    nodes: [
      {
        id: "requst-ip",
        type: "RequestIpHtml",
        x: 150,
        y: 150,
        properties: {
          data: {
            text: "测试传值",
          },
        },
      },
      {
        id: "target-ip",
        type: "TargetIpHtml",
        x: 500,
        y: 150,
        properties: {
          width:220,
          height:180,
          data: {
            text: "测试传值",
            api:['/api 1']
          },
        },
      },
      {
        id: "tag-header",
        type: "TextHtml",
        x: 780,
        y: 70,
        properties: {
          text: "敏感关键字",
        },
      },
      {
        id: "tag-0",
        type: "TagHtml",
        x: 780,
        y: 140, //与标题70 每个间隔80
        // text: "自定义html",
        properties: {
          data: {
            text: "身份证",
          },
        },
      },
      {
        id: "tag-1",
        type: "TagHtml",
        x: 780,
        y: 220,
        // text: "自定义html",
        properties: {
          data: {
            text: "车牌号",
          },
        },
      },
      {
        id: "tag-2",
        type: "TagHtml",
        x: 780,
        y: 300,
        // text: "自定义html",
        properties: {
          data: {
            text: "手机号",
          },
        },
      },
      {
        id: "source-0",
        type: "TargetIpHtml",
        x: 1100,
        y: 150,
        // text: "自定义html",
        properties: {
          width:220,
          height:220, // 一个api占180 加一个api加40
          data: {
            text: "测试传值",
            api:['/api 1','/api 2']
          },
        },
      },
      {
        id: "source-1",
        type: "TargetIpHtml",
        x: 1100,
        y: 400,
        // text: "自定义html",
        properties: {
          width:220,
          height:220, // 一个api占180 加一个api加40
          data: {
            text: "测试传值",
            api:['/api 1','/api 2']
          },
        },
      },
      {
        id: "111",
        type: "DetailHtml",
        x: 250,
        y: 300,
        // text: "自定义html",
        properties: {
          data: {
            text: "测试传值",
          },
        },
      },
    ],
    edges: [
      {
        id: "requst-ip-target-ip",
        sourceNodeId: "requst-ip",
        targetNodeId: "target-ip",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 260, // 起始点的 x 坐标
          y: 160, // 起始点的 y 坐标
        },
        endPoint: {
          x: 450, // 结束点的 x 坐标
          y: 190, // 结束点的 y 坐标
        },
      },
      {
        id: "target-ip-tag-0",
        sourceNodeId: "target-ip",
        targetNodeId: "tag-0",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 610, // 起始点的 x 坐标
          y: 160, // 起始点的 y 坐标
        },
        endPoint: {
          x: 720, // 结束点的 x 坐标
          y: 140, // 结束点的 y 坐标
        },
      }, 
      {
        id: "target-ip-tag-1",
        sourceNodeId: "target-ip",
        targetNodeId: "tag-1",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 610, // 起始点的 x 坐标
          y: 160, // 起始点的 y 坐标
        },
        endPoint: {
          x: 720, // 结束点的 x 坐标
          y: 220, // 结束点的 y 坐标   每一个敏感字加80
        },
      }, 
      {
        id: "target-ip-tag-2",
        sourceNodeId: "target-ip",
        targetNodeId: "tag-2",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 610, // 起始点的 x 坐标
          y: 160, // 起始点的 y 坐标
        },
        endPoint: {
          x: 720, // 结束点的 x 坐标
          y: 300, // 结束点的 y 坐标   每一个敏感字加80
        },
      },
      {
        id: "tag-0-source-0-0",
        sourceNodeId: "tag-0",
        targetNodeId: "source-0",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 840, // 起始点的 x 坐标
          y: 140, // 起始点的 y 坐标
        },
        endPoint: {
          x: 1049, // 结束点的 x 坐标
          y: 170, // 结束点的 y 坐标   初始位置
        },
      },
      {
        id: "tag-0-source-0-1",
        sourceNodeId: "tag-0",
        targetNodeId: "source-0",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 840, // 起始点的 x 坐标
          y: 140, // 起始点的 y 坐标
        },
        endPoint: {
          x: 1049, // 结束点的 x 坐标
          y: 215, // 结束点的 y 坐标   每一个api加 45
        },
      },
      {
        id: "tag-0-source-1-0",
        sourceNodeId: "tag-0",
        targetNodeId: "source-1",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 840, // 起始点的 x 坐标
          y: 140, // 起始点的 y 坐标
        },
        endPoint: {
          x: 1049, // 结束点的 x 坐标
          y: 420, // 结束点的 y 坐标   每一个目标服务加 205
        },
      },{
        id: "tag-0-source-1-1",
        sourceNodeId: "tag-0",
        targetNodeId: "source-1",
        type: "ServerLine", // 连接线类型为直线
        startPoint: {
          x: 840, // 起始点的 x 坐标
          y: 140, // 起始点的 y 坐标
        },
        endPoint: {
          x: 1049, // 结束点的 x 坐标
          y: 465, // 结束点的 y 坐标   每一个api加 45
        },
      },
    ],
  });
});
</script>

<style scoped></style>
